<!--
  @desc: 标签评价
  @author: lanbao
-->
<template>
  <div class="eval">
    <Header :title="title" :switchHeader='switchHeader'></Header>
    <div>
      <div class="contents">
        <div class="content" v-for="(item, index) in list" :key="index">
          <div class="title">
            <h2>{{item.title}}</h2>
            <p>{{item.desc}}</p>
            <img @click="collapseAndOpen(item)" :class="{'icon' : item.isExpand}" src="./../../../assets/imgs/arrow_right.png" alt="">
          </div>
          <collapse-transition>
            <div class="con" v-show="item.isExpand">
              <div class="con1" :class="addClass(item.baseScore, children.rate)" v-for="(children, index) in item.children" :key="index">
                <h3>{{children.title}}</h3>
                <div class="myslider md-example-child md-example-child-slider">
                  <div class="minScore">1</div>
                  <md-slider :format="format" :max='parseInt(5)' v-model="children.rate" :step="parseFloat(0.1)"></md-slider>
                  <div class="maxScore">5</div>
                </div>
                <div class="con2" v-show="item.baseScore>children.rate" >
                  <textarea class="textarea" maxlength="80" placeholder="具体事例，小于80字"></textarea>
                </div>
              </div>
              <p @click="collapseAndOpen(item)" class="top"></p>
            </div>
          </collapse-transition>
        </div>
      </div>
      <div class="radar">
        <div id="main" class="main" ref="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from './../../../components/Header'
import {Slider} from 'mand-mobile'
import collapseTransition from '../../../common/js/slider'
export default {
  data () {
    return {
      title: '调查问卷',
      switchHeader: true,
      bucket: 0,
      isActive: false,
      list: [
        {
          'title': '假设指标合理性（3.2分）',
          'desc': '评分若低于系统打分，需写明理由',
          'isExpand': false,
          'baseScore': 3.5,
          'children': [
            {'title': '营业收入增长率 （3.5分）', 'rate': 2.5},
            {'title': '资产负债率 （3.5分）', 'rate': 4}
          ]
        },
        {
          'title': '抵押保障（3.2分）',
          'desc': '评分若低于系统打分，需写明理由',
          'isExpand': false,
          'baseScore': 3.2,
          'children': [
            {'title': '营业收入增长率 （3.5分）'},
            {'title': '资产负债率 （3.5分）'}
          ]
        }
      ],
      option: {
        
      }
    }
  },
  components: {
    Header,
    [Slider.name]: Slider,
    collapseTransition
  },
  mounted () {
    this.drawPie()
  },
  methods: {
    addClass (baseCore, rate) {
      return baseCore > rate ? 'addClass' : ''
    },
    collapseAndOpen (item) {
      item.isExpand = !item.isExpand
    },
    format (val) {
      return parseFloat(val).toFixed(1)
    },
    drawPie () {
      // let charts = this.$echarts.init(document.getElementById('leiDaTu'))
      var main = this.$refs.chart
      if (main) {
        let charts = this.$echarts.init(main)
        var option = {
          title: {
            text: '测试结果',
            textAlign: 'left'
          },
          tooltip: {}, // 提示层
          legend: {
            data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
          },
          radar: {
            axisLabel: {
              show: true
            },
            name: {
              textStyle: {
                color: '#fff', // 字体颜色
                backgroundColor: '#999', // 背景色
                borderRadius: 3, // 圆角
                padding: [3, 5] // padding
              }
            },
            center: ['50%', '50%'],
            // radius: '60%',
            // startAngle: 360,
            indicator: [
              {
                name: '行业评价',
                max: 5
              },
              {
                name: '投后管控',
                max: 5
              },
              {
                name: '抵押保障',
                max: 5
              },
              {
                name: '增信方保障',
                max: 5
              },
              {
                name: '自偿能力',
                max: 5
              },
              {
                name: '交易结构',
                max: 5
              },
              {
                name: '项目定价',
                max: 5
              },
              {
                name: '交易对手',
                max: 5
              }
            ]
          },
          series: [
            {
              name: '项目平均分',
              type: 'radar',
              data: [
                {
                  value: [3, 2, 3.5, 3.7, 2.5, 4, 4.2, 3.4],
                  name: '项目平均分'
                },
                {
                  value: [4, 4.5, 3.5, 3.7, 5, 4.3, 3.9, 5.0],
                  name: '本人打分'
                }
              ]
            }
          ]
        }
        charts.setOption(option)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../../common/css/variable.styl'
  .eval
    background #eee
    touch-action: none
    padding-bottom 200px
    .contents
      .content
        width 355px
        background $white
        margin 10px auto
        border-radius 8px
        padding-bottom 10px
        .title
          width 335px
          border-bottom 1px solid #ccc
          margin 0 auto
          padding 8px 0
          position relative
          h2
            font-size 15px
            color $brown_color
            line-height 20px
          p
            font-size $font_size_14
            color $gray9_color
            line-height 20px
          img
            width 11px
            height 6px
            position absolute
            top 50%
            margin-top -3px
            right 0
            transform:rotate(-90deg)
            -webkit-transform:rotate(-90deg)
            -moz-transform:rotate(-90deg)
            &.icon
              transform:rotate(90deg)
              -webkit-transform:rotate(90deg)
              -moz-transform:rotate(90deg)
        .con
          width 335px
          margin 0 auto
          position relative
          .top
            left 50%
            margin-left -10px
            bottom 35px
          .con1
            padding 8px 0
            border-bottom none
            position relative
            &::last-child
              border-bottom 1px dashed #ccc
          .con2
            width 335px
            height 150px
            background $grayF4_color
            border-radius 8px
            position relative
            margin-top 14px
            &::before
              content ''
              width 0
              height 0
              border 14px solid
              border-color transparent transparent #f4f4f4
              position absolute
              top -28px
              left 50%
              margin-left -7px
            .icon
              content ''
              width 20px
              height 10px
              position absolute
              bottom 10px
              left 50%
              margin-left -10px
              transform:rotate(90deg)
              -webkit-transform:rotate(90deg)
              -moz-transform:rotate(90deg)
            .textarea
              width 285px
              height 80px
              padding 10px
              background #eee
              margin 19px 15px 31px 15px
              resize none
              font-size $font_size_15
              color $gray9_color
              outline none
              border none
              line-height 17px
          .myslider
            display flex
            justify-content space-between
            border-bottom none
            .minScore, .maxScore
              font-size 12px
              color $yellow_color
              text-align center
              height 100%
              line-height 60px
              position relative
              left:15px
            .maxScore
                left:-15px
            .md-slider
              width 253px
              margin 0 auto
    .radar
      width 355px
      height auto
      background #fff
      margin 10px auto
      border-radius 8px
      padding-bottom 10px
      .main
        margin 0 auto
        width 100%
        height 340px
</style>
